<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>宜鲜生</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
<!--    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css?v=v3.3.7" media="all">-->
    <link rel="stylesheet" type="text/css" href="css/font/iconfont.css?v=1.0.0" media="all">
    <link rel="stylesheet" type="text/css" href="css/layui.css?v=1.0.9" media="all">
    <link rel="stylesheet" type="text/css" href="css/main.css?v1.3.4" media="all">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html{width: 100%;height: 100%;margin:0px;font-family:"微软雅黑"; background:inherit }
	#allmap {width:100%; height:800px; overflow: hidden;}
	#result {width:100%;font-size:12px;}
    .div-a{ float:left;width:20%;border:1px solid #F00}
    .div-b{ float:right;width:80%;border:1px solid #000}
    dl,dt,dd,ul,li{
		margin:0;
		padding:0;
		list-style:none;
	}
	p{font-size:12px;}
	dt{
		font-size:14px;
		font-family:"微软雅黑";
		font-weight:bold;
		border-bottom:1px dotted #000;
		padding:5px 0 5px 5px;
		margin:5px 0;
	}
	dd{
		padding:5px 0 0 5px;
	}
	li{
		line-height:28px;
	}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=20HO9VWIlnsREA1ikvhhFYNfj0HNixXv"></script>
	<!--加载鼠标绘制工具-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
	<!--加载检索信息窗口-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
	<title>企业地图查看</title>
</head>
<body>

        <div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
            <div id="map"
                 style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
        </div>


    <script type="text/javascript" src="js/lib/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map('map');
//        var point = new BMap.Point(104.071, 30.576);  // 创建点坐标
        var point = new BMap.Point(104.052717, 30.63151);  // 创建点坐标
        map.centerAndZoom(point, 13);
        map.enableScrollWheelZoom();
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.NavigationControl({'anchor':BMAP_ANCHOR_BOTTOM_RIGHT}));
    </script>
    <script type="text/javascript" src="js/map/label.js"></script>
    <script type="text/javascript" src="js/map/text.js"></script>
	<script type="text/javascript" src="js/map/json.js"></script>
<script>
    var streetOverlays = [], propertyOverlays = [], areaOverlays = [];
    var overlays = [], areaPointArr = [], streetPointArr = [];
    var propertyDataArr = [], areaDataArr=[], streetDataArr = [];

    $(function(){
/*
        propertyDataArr = propertyJson.data;
        streetDataArr = streetJson.data;
        areaDataArr = areaJson.data;
*/
        $.ajaxSetup({
            async : false
        });
        $.post('/education/api/department/area', {type:4, lat: point.lat, lng: point.lng, distance: 50000}, function(rs){
             if(rs.status == 200){
                 propertyDataArr = rs.data;
             }
         });
        $.post('/education/api/department/area', {type:2, lat: point.lat, lng: point.lng, distance: 50000}, function(rs){
            if(rs.status == 200){
                streetDataArr = rs.data;
            }
        });
        $.post('/education/api/department/area', {type:1, lat: point.lat, lng: point.lng, distance: 50000}, function(rs){
            if(rs.status == 200){
                areaDataArr = rs.data;
            }
        });

        init();
        addEvent();
    });

    function init(){
        /*
         绘制地图区域
         */
        var arr = rs.data;
        for(var i in arr){
            var tmp = [];
            for(var o in arr[i].data) {
                var item = arr[i].data[o];
                var point2 = new BMap.Point(item.lng, item.lat);
                tmp.push(point2);
            }
            if(arr[i].type == 1) {
                areaPointArr.push(tmp)
            } else {
                streetPointArr.push(tmp);
            }
        }

        for(var o in areaPointArr){
            map.addOverlay(new PolygonOverlay(areaPointArr[o]));
        }

        $.each(areaDataArr, function(i, n){
            var str = n.names + '<br>' + n.streetnum + '条街道、' + n.enterprisenum + '个污染源';
            var t = new TextOverlay(new BMap.Point(n.lng, n.lat), str, showEp,
                            '{"name":"areaid", "type":"1", "ids": "'+ n.ids +'"}');
            areaOverlays.push(t);
        });
        $.each(streetDataArr, function(i, n){
            var str = n.names + '<br>' + n.enterprisenum + '个污染源';
            var t = new TextOverlay(new BMap.Point(n.lng, n.lat), str, showEp,
                            '{"name":"streetid", "type":"2", "ids": "'+ n.ids +'"}');
            streetOverlays.push(t);
        });
        $.each(propertyDataArr, function(i, n){
            var t = new ComplexCustomOverlay(new BMap.Point(n.lng, n.lat), n.names, n.enterprisenum + '个污染源', showEp,
                            '{"name":"propertyid", "type":"4", "ids": "'+ n.ids +'"}');
            propertyOverlays.push(t);
        });
        showOverlay(areaOverlays, 1);
    }

    function addEvent(){
        map.addEventListener("zoomend", function(e){
            var zoom = map.getZoom();
            //load street area
            var arr = zoom > 13 ? streetPointArr : areaPointArr;
            map.clearOverlays();
            for(var o in arr){
                map.addOverlay(new PolygonOverlay(arr[o]));
            }
            //load area
            if(zoom > 14 ){
                showOverlay(propertyOverlays, 1);
            } else if(zoom > 13) {
                showOverlay(streetOverlays, 1);
            } else {
                showOverlay(areaOverlays, 1);
            }
        });
    }

    function showOverlay(overlays, show){
        $.each(overlays, function(i, n){
            map.addOverlay(n);
        });
    }

    function showEp(event){
        var param = event.target.getAttribute('param');
        var j = $.parseJSON(param);
        //go to sublevel
        if(j.type){
            if(j.type == 1){
                map.setZoom(14);
            } else if(j.type == 2){
                map.setZoom(15);
            }
        }
        parent.frames[0].window.refresh(j.name, j.ids);
    }

</script>


</body>
</html>
